/**********************************************************
  THEME VARIABLES -- TO BE MOVED TO EXTERNAL FILE, PER THEME
**********************************************************/

/* Color variables (non-text) */
@color-bg: #000; /* General background color */

@color-grad1-base: #555; /* Gradient 1 is used in the masthead and for list items. */
@color-grad2-base: #333; /* Gradient 2 is used in the footer. */
@color-grad3-base: #666; /* Gradient 3 is used in buttons. */

@color-scrollbar: #fff; 

/* Text style variables */
@typeface-text: "Arial, Helvetica, sans-serif";
@size-font-text: 14px;
@color-font-text: #fff;
@color-shadow-text: #fff; /*rgba(0,0,0,.8) Text shadow works best in black or white, depending on background. Set opacity to 0 to hide it. */

@typeface-heading: "Arial, Helvetica, sans-serif";
@size-font-heading: 24px;
@color-font-heading: #fff;
@color-shadow-heading:#fff; /* rgba(0,0,0,.8) Heading shadow works best in black or white, depending on background. Set opacity to 0 to hide it. */

@color-text-navbar: #fff;
@color-shadow-navbar: #fff; /* rgba(0,0,0,.8) Navigation text shadow works best in black or white, depending on background. Set opacity to 0 to hide it. */

/* Input style variables */
@input-radius: 6px;
@color-form-borders: #666;


/**********************************************************
  CALCULATED VARIABLES 
**********************************************************/
/* Text line height */
@size-leading-text: @size-font-text * 1.4;
@size-leading-heading: @size-font-heading * 1.2;


/**********************************************************
  JQ UI STYLES
**********************************************************/
body {
	margin:0px;
}

#jQUi {

/* DISPLAY PARAMETERS */
	* {	margin: 0; padding: 0; }
	img { border: none; } 
	position: absolute;
	top: 0px;  bottom: 0px;
	width: 100%;
	overflow-x: hidden;
	-webkit-text-size-adjust: none;
	-webkit-box-sizing: border-box;
	display: -webkit-box; /* Orient first container vertically */
	-webkit-box-orient: vertical; /* Stretch child elements to fit the container */
	-webkit-box-align: stretch;


/* USER INTERACTION STYLES AND BEHAVIOR */
	-webkit-user-select: none; /* Prevent copy paste for all elements except text fields */
	input, textarea { -webkit-user-select: text; } /* Allow text selection for input and text fields */
	-webkit-tap-highlight-color: rgba(255,255,255,.5); /* Set highlight color for user interaction */


/* DEFAULT STYLES */
	background-color: @color-bg;
	font-family: Arial, Helvetica, sans-serif;
	font-size: @size-font-text;
	line-height: @size-leading-text;
	color: @color-font-text;


/* TAG ATTRIBUTES */
	p {
		font-family: @typeface-text;
		font-size: @size-font-text;
		font-weight: normal; 
		line-height: @size-leading-text;
		color: @color-font-text;
		padding: 12px;
	}

	h1 {
		font-family: @typeface-heading;
		font-size: @size-font-heading;
		font-weight: bold; 
		line-height: @size-leading-heading;
		color: @color-font-heading;
		text-shadow: 0 -1px 0 @color-shadow-heading;
		text-overflow: ellipsis;
	}


/* UI GRADIENTS (mixins to be used in header, footer, buttons, etc.) */
	.gradient1 {
		background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, @color-grad1-base), color-stop(100%, darken(@color-grad1-base, 25%)));
		background-image: -webkit-linear-gradient(top, color-stop(0%,@color-grad1-base), color-stop(100%, darken(@color-grad1-base, 25%)));
		background-image: linear-gradient(to bottom, color-stop(0%, @color-grad1-base), color-stop(100%, darken(@color-grad1-base, 25%)));
	}
	.gradient2 {
		background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, @color-grad2-base), color-stop(100%, darken(@color-grad2-base, 25%)));
		background-image: -webkit-linear-gradient(top, @color-grad2-base 0%, darken(@color-grad2-base, 25%) 100%);
		background-image: linear-gradient(to bottom, @color-grad2-base 0%, darken(@color-grad2-base, 25%) 100%);
	}
	.gradient3 {
		background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, @color-grad3-base), color-stop(100%, darken(@color-grad3-base, 25%)));
		background-image: -webkit-linear-gradient(top, @color-grad3-base 0%, darken(@color-grad3-base, 25%) 100%);
		background-image: linear-gradient(to bottom, @color-grad3-base 0%, darken(@color-grad3-base, 25%) 100%);
	}
	

/* MASTHEAD */
	#header {
		display: block;
		left: 0px;  right: 0px;
		height:48px;
		z-index: 250;
		.gradient1;
		-webkit-box-shadow: 0px 0px 24px rgba(0,0,0,0.8); box-shadow: 0px 0px 24px rgba(0,0,0,0.8);
	} /*Masthead box */
	#header > * { position: relative;  z-index: 2; }

	#header > h1 {
		position: absolute;
		overflow: hidden;
		width: 100%;  height: 48px; 
		line-height: 44px !important;
		text-align: center !important;
		text-shadow:0 -1px darken(@color-grad1-base, 80%);
	    z-index: 1;
		white-space: nowrap;
	} /* Masthead text */


/* CONTENT AREA */
	#content {
		position: absolute;
		top: 48px; bottom: 62px; left: 0px; right: 0px;
		display: block;
		z-index: 180;
		overflow: hidden;
	} /* Accounts for positioning of the content area, which is everything below the masthead/header and above the navbar. */

	.panel {
	    -webkit-backface-visibility: hidden;
	    display: none;
		z-index: 180;
		width: 100%; height: 100%;
	    position: absolute; 
	    top: 0px; left: 0px;
		overflow: auto;
		-webkit-overflow-scrolling:touch;
		background: @color-bg;
	} 
	.panel > * {
	-webkit-backface-visibility: hidden;
	-webkit-perspective: 1000;
}


/* FOOTER NAVIGATION BAR */
	#navbar {
		position: absolute;
		left: 0px; right: 0px; bottom: 0px;
		z-index: 1000;
		height: 62px; 
		padding: 0px 1px;
		.gradient2;
		-webkit-box-shadow: 0px 0px 24px rgba(0,0,0,0.8); box-shadow:0px 0px 24px rgba(0,0,0,0.8);
		text-align: center !important;
	}

	#navbar a {
		position: relative;
		width: 62px;  height: 60px;
		display: inline-block;
		margin: 0px auto;
		font:bold 12px/100px Arial, Helvetica, sans-serif;
		text-decoration: none;
		color: fadein(@color-text-navbar, 20%);
		text-align: center;
		text-shadow: 0 -1px 0 @color-shadow-navbar;
		overflow: hidden;
	}

	#navbar a:active, #navbar a:focus, #navbar a:active:focus, #navbar .selected {
		color: @color-text-navbar !important;
		background-color: fadein(darken(desaturate(@color-grad2-base, 50%), 20%), 85%);
	}
	#navbar a:not(:last-of-type) { border-right: 1px solid darken(desaturate(@color-grad2-base, 50%), 50%); }

	#navbar .icon:before {
		position: absolute;
		top: -10px;	left: 10px;
		font-size: 48px;
		line-height: 62px;
		text-align: center;
	}

	.jq-badge {
		-webkit-box-direction: reverse; 
		-webkit-box-sizing: border-box;
		position: absolute;
		top: 2px; right: 2px;
		width: 22px; height: 22px;
		border-radius: 11px;
		background: red;
		border: 2px solid white;
		margin: 2px;
		box-shadow: 0 1px 4px rgba(0,0,0,.65);
		font:bold 12px/20px Arial, Helvetica, sans-serif;
		color: white;
		text-align: center;
		text-overflow: ellipsis;
		overflow: hidden;
		z-index: 100;
	}
	.jq-badge.br {
		top: auto;  bottom: 2px;  left: auto;  right: 2px;
	}
	.jq-badge.bl {
		-webkit-box-direction: normal !important;
		top: auto;  bottom: 2px;  left: 2px;  right: auto;
	}
	.jq-badge.tl {
		-webkit-box-direction: normal !important;
		top: 2px;  bottom: auto;  left: 2px;  right: auto; 
	}

	footer, header, nav { display:none; } /* Custom footers - always hidden */


/* SIDE-SLIDING MENU */
	.hasMenu{
 		position:absolute !important;
 		left:0px !important;
	}
		/*menu on/off mechanism, note .hasMenu.off and #menu.on default to no transform*/
	.hasMenu.to-on {
       -webkit-transition: -webkit-transform 150ms;
    }
   .hasMenu.on, .hasMenu.to-on {
       -webkit-transform:translate3d(200px,0px,0px);
    }
    .hasMenu.to-off {
       -webkit-transition: -webkit-transform 150ms;
       -webkit-transform:translate3d(0px,0px,0px);
    }
    #menu.on {
       -webkit-transform:none;
	   -webkit-transition:none;
    }
    #menu.to-on {
        -webkit-transition: -webkit-transform 150ms;
        -webkit-transform:translate3d(0px,0px,0px);
    }
    #menu.to-off {
        -webkit-transition: -webkit-transform 150ms;
    }
    #menu, #menu.off, #menu.to-off {
        -webkit-transform:translate3d(-200px,0px,0px);
    }
	#menu.on { left:0px !important; }
	#menu {
		display: none;
		position: absolute; 
		top:0px; left:0px; bottom: 0px;
		z-index:1;
		width: 200px; height: 100%;
		background: darken(@color-bg, 20%);
	}

	#menu_scroller {
		padding-bottom:10px;
	    -webkit-backface-visibility: hidden;
	    overflow:auto;
	    -webkit-overflow-scrolling:touch;
	}	
	#menu_scroller > * {
	witem--bestebkit-backface-visibility: hidden;
		-webkit-perspective: 1000;
	}

	#menu > * {
		width: 90%;
		margin: 0 auto;
	}

	.jqMenuHeader {
		position: relative;
		overflow: hidden;
		margin:6px auto;
		font-family: @typeface-heading;
		font-size: @size-font-heading;
		font-weight: bold; 
		line-height: @size-leading-heading;
		color: @color-font-heading;
		text-shadow: 0 -1px 0 @color-shadow-heading;
		text-align: center !important;
	    text-overflow: ellipsis;
		white-space: nowrap;
		z-index: 1;
	} /* Masthead text */ 

	.jqMenuClose{
		position: absolute;
		top: 5px;
		right: 10px;
		z-index: 2;
	}

	#menu .title {
		margin: 12px 0 3px; 
		font-size: 16px;
		color: @color-font-heading;
		font-weight: bold;
	}

	#menu ul { margin-bottom: 5px; }
	 
	#menu ul > li {
		padding-left: 10px;
		display: block;
		width: 100%; height: 28px;
		list-style: none;
		background: inherit;
	} /* A plain, non-interactive list item--best suited to a heading. */

	#menu ul > li > a {
		display: block;
		width: 100%; height: 28px;
		font-family: @typeface-text;
		font-weight: normal;
		font-size: @size-font-text;
		line-height: 28px;
		padding-left: 6px;
		color: @color-font-text;
		text-decoration: none;
		border-style: solid;
		border-width: 1px;
		border-color: lighten(@color-bg, 25%) lighten(@color-bg, 25%) transparent lighten(@color-bg, 25%);
		background: lighten(@color-bg, 10%);
	} 
	#menu ul > li > a:after { content: ""; }
	#menu ul > li:last-child > a { border-bottom: 1px solid lighten(@color-bg, 25%); }


/**********************************************************
	BUTTON STYLES
**********************************************************/
#backButton {
	display: block;
	position: absolute;
	left: 0px;
	top: 0px;
	max-width: 60px;
	text-overflow: ellipsis;
} /* Sets up positioning of the back button which appears in the header */

#backButton > div {
	max-width: 60px;
	overflow: hidden;
	text-overflow: ellipsis;
} /* sets up sizing and handling of excess text for the type in the back button */

.button {
	position: relative;
	display: inline-block;
	height: 36px; min-width: 60px;
	padding: 0px 8px;
	-webkit-border-radius: 18px; border-radius: 18px;
	.gradient3;
	border: 1px solid @color-grad3-base;
	margin: 6px; 
	cursor: pointer;
	z-index: 1;
	font-family: @typeface-text; 
	font-size: @size-font-text;
	color: @color-font-text;
	font-weight: bold;
	line-height: 36px;
	text-decoration:none;
	text-align:center;
	text-shadow: 0 -1px 0 darken(@color-grad3-base, 80%);
	text-overflow: ellipsis; 
	-webkit-box-shadow: 0 0 0 1px darken(@color-grad3-base, 80%); box-shadow: 0 0 0 1px darken(@color-grad3-base, 80%);
	-webkit-transition: all 0.2s ease; transition: all 0.2s ease;
} /* Styling for CSS-generated buttons, including the back button. These buttons can bue used anywhere in the UI. */

.button.pressed {
	border: 1px solid darken(@color-grad3-base, 80%);
	-webkit-box-shadow: 0 0 0 4px darken(@color-grad3-base, 90%); box-shadow: 0 0 0 1px darken(@color-grad3-base, 90%);
} /* behavior of button for touch interaction */

.modalbutton {
	position: absolute;
	top: 0px;  right: 5px;
	width: 58px; height: 32px;
	line-height: 32px;
	z-index: 9999;
} 

.closebutton  {
	position: absolute;
	top: 6px; right: 6px;
	display: block;
	height: 24px !important; width:24px !important;
	border-radius: 12px;
	border: 1px solid #666;
	background: #fff;
	color: #333;
	font: bold 21px/18px 'Arial Black', Arial Black, Gadget, Arial, Helvetica, sans-serif;
	text-align: center;
	text-decoration: none;
	-webkit-transition:all 0.2s ease; transition:all 0.2s ease;
}
.closebutton:before { content:'x'; }
.closebutton.selected,.closebutton.modalButton.selected {
	color:#fff;
	background:#333; 
}


/* LIST NAVIGATION */
	ul { }
	 
	ul > li {
		display: block;
		width: 100%; height: 48px;
		list-style: none;
		background: @color-grad2-base;
		margin-bottom: 1px;
	} /* A plain, non-interactive list item--best suited to a heading. */

	ul > li > a {
		display: block;
		width: 100%; height: 48px;
		padding-left:8px;
		font-family: @typeface-heading;
		font-weight: bold;
		font-size: @size-font-heading * .75;
		line-height: 48px;
		color: @color-font-heading;
		text-decoration: none;
		text-shadow: 0 -1px 0 @color-shadow-heading;
		border-bottom: 1px solid darken(@color-grad2-base, 50%);
	} /* A touchable, interactive list item. */

	ul > li > a:after {
		content: ">";
		position: absolute;
		right: 15px;
	}
	ul > li > a[selected], ul > li > a:active { color:#fff !important; } /* A selected and active states for interactive list items. */

	h2 {
		display:block;
		width: 100%; height: 48px;
		font-family: @typeface-heading;
		font-weight: bold;
		font-size: @size-font-heading * .75;
		line-height: 48px; 
		padding: 0px 8px;
		color: @color-font-heading;
		text-shadow: 0 -1px 0 @color-shadow-heading;
		background: @color-grad1-base;
	} /* Header class used for non-navigable header bars (h1 is reserved for the header) */

	.collapsed:after {
		float:right;
		content:'';
		border-left: 5px solid transparent;
		border-right: 5px solid transparent;
		border-top: 6px solid #fff;
		display:block;
		position:absolute;
		top:16px; right:13px;
	}
	.collapsed:before {
		float:right;
		content:'';
		color:transparent;
		background:transparent;
		width:14px; height:14px; 
		display: block;
		border:2px solid white;
		border-radius:3px;
		position:absolute;
		top: 9px; right: 9px;
	}
	.expanded:after {
		float: right;
		content: '';
		border-left: 5px solid transparent;
		border-right: 5px solid transparent;
		border-bottom: 6px solid #fff;
		display: block;
		position: absolute;
		top: 14px; right: 13px;
	}
	.expanded:before {
		float: right;
		content: '';
		color: transparent;
		background: transparent;
		width :14px; height: 14px; 
		display: block;
		border: 2px solid white;
		border-radius: 3px;
		position: absolute;
		top: 9px; right: 9px;
	}



/* MISCELLANEOUS FUNCTIONAL UI ELEMENTS */
	#modalContainer { width:100%; }
	#jQui_modal {
		display: none;
	    -webkit-backface-visibility: hidden;
		z-index: 9999 !important;
		width: 100%; height: 100%;
		position: absolute; top: 0px; 
		overflow: hidden;
		background: @color-bg !important;
		-webkit-perspective: 1000;
	}

	.jqmScrollbar { background-color: @color-scrollbar !important; } /* Sets the color of the scrollbar */


/* LOADSCREEN STYLES */
	#splashscreen {
		position: absolute;
		top: 0px; bottom: 0px;
		width: 100%;
		left: 0px;
		min-height: 100%;
		background: @color-bg !important;
		color: white !important;
		font-size: 30px;
		text-align:center;
		z-index: 9999;
		display: block;
		margin: 0 auto !important;
		padding-top: 80px !important;
	}
	.splashscreen {
		background: @color-bg !important;
		padding-left: 40px;
		padding-top: 30px !important;
		min-height: 100%;
	}
	.ui-icon {
		background: rgba(0,0,0,.4);
		background-repeat: no-repeat;
		border-radius: 9px;
	}

	.ui-loader { 
		display: none; 
		position: absolute; 
		opacity: .85; 
		z-index: 100; 
		left: 50%; 
		width: 200px; 
		margin-left: -100px; margin-top: -35px; 
		padding: 10px 30px; 
		background: rgba(0,0,0,.4);
		border-radius: 9px;
	}
	.ui-loader h1 { 
		font-size: 15px; 
		text-align: center; 
	}
	.ui-loader .ui-icon { 
		position: static; 
		display: block; 
		opacity: .9; 
		margin: 0 auto; 
		width: 35px; 
		height: 35px; 
		background-color: transparent; 
	}

	.spin  {
		-webkit-transform: rotate(360deg);
		-webkit-animation-name: spin;
		-webkit-animation-duration: 1s;
		-webkit-animation-iteration-count:  infinite;
	}
	@-webkit-keyframes spin {
		from {-webkit-transform: rotate(0deg);}
	  	to {-webkit-transform: rotate(360deg);}
	}

	.ui-icon-loading {
		background-image: url();
		width: 40px;
		height: 40px;
		border-radius: 20px;
		background-size: 35px 35px;
	}
		
	.ui-corner-all { border-radius:.6em; }
	#jQui_mask { position:absolute; top:45%; }


/* FORM ELEMENTS */
	fieldset h4 {
		text-align:left;
		font-family: @typeface-heading;
		color:@color-font-heading;
		font-weight:bold;
		font-size:@size-font-heading * .75;
		line-height:21px;
		margin-bottom:-8px; margin-top:8px;
		text-shadow:1px 1px 3px @color-shadow-heading;
	} /* Style for subhead for a group of labels/inputs within a fieldset. */

	fieldset {
		margin:12px 8px;
		padding:12px 18px 12px 18px;
		-webkit-border-radius:5px;
		border-radius:5px;
		border:1px solid #595d61;
		outline:0;
		width:95%;
	}
	fieldset p {
		display:block;
		position:relative;
		overflow:hidden;
		padding:0px;
		padding-bottom:8px;
		padding-top:8px;
		font-family:Arial, Helvetica, sans-serif;
		font-size:14px;
		line-height:10px;
		background:transparent;
		height:37px !important;
		-webkit-box-shadow:none;
	} /* The paragraph within a fieldset is used as a wrapper to help manage the replacement of native input elements. */

	legend {
		margin: 0;
		font-family: @typeface-text;
		font-size: @size-font-text * 1.25;
		font-weight: bold;
		overflow: hidden;
		color: @color-font-text;
		text-transform: uppercase;
		text-shadow: 1px 1px 3px @color-shadow-text;
	} /* This is the name that appears at the top left of the fieldset. */

	textarea { 
		display: block;
		margin: 4px 0 18px;
		padding: 8px;
		border: solid 1px @color-form-borders;
		outline: 0;
		color: @color-font-text;
		background: @color-bg;
		-webkit-border-radius: @input-radius; border-radius: @input-radius;
		-webkit-box-shadow: inset 2px 2px 6px rgba(0,0,0,.5); box-shadow: inset 2px 2px 6px rgba(0,0,0,.5);
		width: 85%;
		min-height: 150px;
		line-height: 120%;
	} /* These properties determine the look of textarea inputs. */

	input { 
		display: inline-block;
		width: 65%;
		margin-top: 4px; margin-bottom: 12px;
		padding: 8px;
		border: solid 1px #999;
		outline: 0;
		color: #fff;
		background: @color-bg;
		-webkit-border-radius: @input-radius; border-radius: @input-radius;
		-webkit-box-shadow: inset 2px 2px 6px fadeout(darken(@color-bg, 90%), 80%); box-shadow: inset 2px 2px 6px fadeout(darken(@color-bg, 90%), 80%);
	} /* These properties combine to create the look of the input fields. */

	input:hover, textarea:hover, input:focus, textarea:focus { border-color:#ccc; } /* Changes the border color of the input field while active. */

	input[type=checkbox], input[type=radio]  {
		position: absolute;
	    left: 0;
		-webkit-appearance: none;
		opacity:0;
		margin-bottom:30px;
	    width:0px;
	} /* Blocks rendering of the native radio controls. */

	input[type=checkbox] + label, input[type=radio] + label { 
		float:left;
		font-size:15px;
		font-weight:bold;
		line-height:26px; /* changing this value will change the vertical relationship to the radios & checkboxes. */
		margin-left:10px;
		padding-left:30px;
		background:url() 0 0px no-repeat;
		background-repeat:none;
		height:25px;
	} /* Styling for the labels. */


	/* Following block of paragraph classes sets up the usage of the custom radio and checkbox graphics. */
	input[type=radio] + label { background-position:0 -225px; }
	input[type=checkbox] + label { background-position:0 -25px; }

	/* Styles for "checked." */
	input[type=radio]:checked + label { background-position:0 -300px; }
	input[type=radio]:hover:checked + label,
	input[type=radio]:focus:checked + label,
	input[type=radio]:checked + label:hover,
	input[type=radio]:focus:checked + label { background-position:0 -300px; }

	input[type=checkbox]:checked + label { background-position:0 -100px; }
	input[type=checkbox]:hover:checked + label,
	input[type=checkbox]:focus:checked + label,
	input[type=checkbox]:checked + label:hover,
	input[type=checkbox]:focus:checked + label { background-position:0 -100px; }


	/* Styles for "hover/focus." */
	input[type=checkbox]:hover + label,
	input[type=checkbox]:focus + label,
	input[type=checkbox] + label:hover { background-position:0 -0x; }

	input[type=radio]:hover + label,
	input[type=radio]:focus + label,
	input[type=radio] + label:hover { background-position:0 -200px; }

	/* Styles for "active." */
	input[type=checkbox]:active + label,
	input[type=checkbox] + label:hover:active { background-position:0 -0px; }

	input[type=radio]:active + label,
	input[type=radio] + label:hover:active { background-position:0 -200px; }

	input[type=checkbox]:active:checked + label,
	input[type=checkbox]:checked + label:hover:active { background-position:0 -100px; }

	input[type=radio]:active:checked + label,
	input[type=radio]:checked + label:hover:active { background-position:0 -300px; }

	/* Styles for "disabled." */
	input[type=checkbox]:disabled + label,
	input[type=checkbox]:hover:disabled + label,
	input[type=checkbox]:focus:disabled + label,
	input[type=checkbox]:disabled + label:hover,
	input[type=checkbox]:disabled + label:hover:active { background-position:0 -175px; opacity:.5 !important; }

	input[type=radio]:disabled + label,
	input[type=radio]:hover:disabled + label,
	input[type=radio]:focus:disabled + label,
	input[type=radio]:disabled + label:hover,
	input[type=radio]:disabled + label:hover:active { background-position:0 -250px; opacity:.5 !important; }

	input[type=checkbox]:disabled:checked + label,
	input[type=checkbox]:hover:disabled:checked + label,
	input[type=checkbox]:focus:disabled:checked + label,
	input[type=checkbox]:disabled:checked + label:hover,
	input[type=checkbox]:disabled:checked + label:hover:active { background-position:0 -200px; opacity:.5 !important; }

	input[type=radio]:disabled:checked + label,
	input[type=radio]:hover:disabled:checked + label,
	input[type=radio]:focus:disabled:checked + label,
	input[type=radio]:disabled:checked + label:hover,
	input[type=radio]:disabled:checked + label:hover:active { background-position:0 -375px; opacity:.5 !important; }

	input[type=radio]:active:checked + label,
	input[type=checkbox]:active:checked + label,
	input[type=radio]:active + label,
	input[type=checkbox]:active + label,
	input.jq-ui-slider[type=checkbox]:checked + label ,
	input.jq-ui-slider[type=radio]:checked + label 
	{ background-position:-28px 0px; }


	/* slider controls */
	input.jq-ui-slider {
		position:absolute;
		left:0;
		opacity:0;
		-webkit-appearance: none; /* Blocks rendering of the native radio controls. */
	} 


		
	input.jq-ui-slider + label { 
		float:left;
		font-size:15px;
		font-weight:normal;
		line-height:24px; /* changing this value will change the vertical relationship to the radios & checkboxes. */
		margin-left:10px;
		padding-left:57px;
		color:#fff; 
		background-image: url();
		height:24px;
		width:57px;
		display:inline-block;
	    -webkit-transition: all 0.3s  ease-in-out;
	} 
	input.jq-ui-slider[type=radio]:disabled:checked + label,
	input.jq-ui-slider[type=radio]:focus:disabled:checked + label,
	input.jq-ui-slider[type=checkbox]:disabled:checked + label,
	input.jq-ui-slider[type=checkbox]:focus:disabled:checked + label
	{ background-position:-29px 0px; opacity:.7 !important; }

	/* Styles for "disabled." */
	input.jq-ui-slider[type=checkbox]:disabled + label,
	input.jq-ui-slider[type=checkbox]:focus:disabled + label,
	input.jq-ui-slider[type=radio]:disabled + label,
	input.jq-ui-slider[type=radio]:focus:disabled + label
	{ background-position:0 0; opacity:.7 !important; }
		
	select[disabled]~div { opacity:.7; }


}


@media handheld, only screen and (min-width: 768px) {
	#jQUi {
		.hasMenu, .hasMenu.on  {
			position:absolute !important;
			left:256px !important;
	        -webkit-transition: all 0ms !important;
	        -webkit-transform:translate3d(0,0,0);
		}

		#badgephone { display:none !important; }
		#badgetablet { display:inline-block !important; }
		.jqMenuClose { display:none !important;	}
		
		nav~#menu {
			z-index:200 !important;
			width:256px !important;
			height:100% !important;
			display:block !important;
			position:absolute !important;  left:0px !important;
			background:@color-bg !important;
			-webkit-transform:translate3d(0,0,0) !important;
		    -webkit-transition:none !important;
		}
		.hasMenu.to-on {
			-webkit-transition: none !important;
		}
		.hasMenu.on, .hasMenu.to-on {
			-webkit-transform:translate3d(0px,0px,0px) !important;
			-webkit-transition:none !important;
		}
		.hasMenu.to-off {
			-webkit-transform:translate3d(0px,0px,0px) !important;
			-webkit-transition:none !important;
		}
	}
   
}